<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>
  <view class="index">

    <!--顶部-->
    <u-navbar
        :safeAreaInsetTop="false"
        :placeholder="false"
        :is-back="true"
        :is-fixed="true"
        :backIconColor="titleColor"
        :title="'私人定制'"
        :border-bottom="false"
        :title-bold="true"
        :title-color="titleColor"
        :background="{ background : navBg }"
    >
    </u-navbar>

    <view class="page-title">
      <view>私人定制专属脱单发案</view>
      <view>幸福快人一步</view>
    </view>

    <view class="page-list">
      <view class="list-child" v-for="(item,index) in pageList" :key="index">
        <view class="child-one">
          <view class="one-item">
            <image class="item-pic" mode="aspectFit" :src="item.pic"></image>
            <view class="item-data">
              <view class="data-title">
                {{ item.title }}
              </view>
              <view class="data-tip">
                {{ item.text }}
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="page-bottom" @click="showPop = true">
      <view class="bottom-btn">
        申请私人定制服务
      </view>
    </view>
    <view class="page-bottomFooter"></view>


    <view class="page-pop"  v-if="showPop">
      <view class="pop-con">
        <view class="con-box"
              :style="{'--back-rgba': hexToRgba($theme.primaryColor,0.2),'--before--back-rgba': hexToRgba($theme.primaryColor,0.2)}">
          <!--红娘牵线服务-->
          <view>
            <view class="box-top">
              <view>长按二维码添加红娘微信</view>
            </view>
            <view class="box-data">
            <image class="data-ewm" mode="aspectFit" src="http://www.jiushuitv.com/content/images/qrcode.jpg"></image>
              <view class="data-contact">
                <set-svg width="24rpx" height="24rpx" class="contact-icon" old-color="#7751E7"
                         :newColor="$theme.primaryColor"
                         :svgString="`${$domain}/static/icons/guest/quotes.svg`"></set-svg>
                <view class="contact-text">
                  <view>超严审核、高效推荐</view>
                  <view>不限要求、私人定制</view>
                </view>
                <set-svg width="24rpx" height="24rpx" class="contact-icon contact-iconRight" old-color="#7751E7"
                         :newColor="$theme.primaryColor"
                         :svgString="`${$domain}/static/icons/guest/quotes.svg`"></set-svg>
              </view>
            </view>
          </view>
        </view>
        <u-icon @click="showPop = false" class="con-close" color="#ffffff" name="close-circle" size="60"></u-icon>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import {computed, reactive, ref} from 'vue'
import {onPageScroll} from "@dcloudio/uni-app";
import {useAppStore} from "@/stores/app";
import {hexToRgba} from "@/utils/hexToRgba";

const showPop = ref(false)
const navBg = ref<string>('rgba(255,255,255,0)')
const titleColor = ref<string>('#fff')

onPageScroll((event: any) => {
  navBg.value = event.scrollTop > 10 ? '#fff' : 'rgba(255,255,255,0)'
  titleColor.value = event.scrollTop > 10 ? '#111' : '#fff'
})

const navChange = (item: any) => {
  console.log('item', item)
}

const navCurrent = ref(0)
const navList = ref([
  {
    name: '收益明细',
    id: '',
  },
  {
    name: '支出明细',
    id: 1,
  }
])

const navTo = (url: any) => {
  uni.navigateTo({url})
}

const appStore = useAppStore()
const domain = appStore.getDomain

const pageList = ref([
  {
    pic: `${domain}/static/icons/custom/wxzcbg.svg`,
    name: '无需注册曝光',
    text: '不用自己注册，红娘当面了解信息，100%保护隐私'
  },
  {
    pic: `${domain}/static/icons/custom/sdljhy.svg`,
    name: '深度了解会员',
    text: '红娘一对一了解会员需求，推荐更精准'
  },
  {
    pic: `${domain}/static/icons/custom/kfychy.svg`,
    name: '开放隐藏会员',
    text: '名校海归、高颜值，优质资源库为您优先匹配'
  },
  {
    pic: `${domain}/static/icons/custom/hnwntj.svg`,
    name: '红娘为您推荐',
    text: '不用自己海量筛选，红娘定期推送合适人恢'
  },
  {
    pic: `${domain}/static/icons/custom/grxxzd.svg`,
    name: '个人形象指导',
    text: '专业指导形象改造，使您对自己的风格有明确的定位'
  },
  {
    pic: `${domain}/static/icons/custom/tsfapjm.svg`,
    name: '替双方安排见面',
    text: '双方互感兴趣，提供约会方案，即刻安排见面'
  },
  {
    pic: `${domain}/static/icons/custom/fkyjjg.svg`,
    name: '反馈约见结果',
    text: '约会后，第一时间反馈对方对你的印象，无需猜测'
  },
  {
    pic: `${domain}/static/icons/custom/wxzcbg.svg`,
    name: '开放隐藏会员',
    text: '名校海归、高颜值，优质资源库为您优先匹配'
  },
])
</script>

<style lang="scss" scoped>
.index {
  padding-bottom: 60rpx;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  width: 100%;
  transition: all 1s;
  min-height: calc(100vh - env(safe-area-inset-bottom));
  background-image: linear-gradient(175deg, var(--color-primary) 30%, transparent 50%);

}

.page-title {
  font-size: 50rpx;
  color: #ffffff;
  font-weight: bold;
  text-align: center;
  padding: 30rpx;
}

.page-list {
  width: calc(100% - 60rpx);
  margin: 0 auto;
  padding: 30rpx;
  background-color: #ffffff;
  border-radius: 30rpx;
  .list-child {
    padding-left: 30rpx;
    position: relative;
    &:first-child {
      &:after {
        top: auto;
        bottom: 0;
        height: 50%;
        transform: translateX(-50%);
      }
    }
    &:last-child {
      &:after {
        top: 0;
        height: 50%;
        transform: translateX(-50%);
      }
    }
    &:before,&:after {
      content: '';
      width: 16rpx;
      height: 16rpx;
      border-radius: 50%;
      background-color: var(--color-primary);
      position: absolute;
      left: 0;
      top: 50%;
      transform: translate(-50%,-50%);
      z-index: 1;
    }
    &:after {
      height: 100%;
      width: 2rpx;
      background-color: #D8D8D8;
      left: 0;
      transform: translate(-50%,-50%);
      z-index: 0;
    }
    .child-one {
      padding-bottom: 30rpx;
      .one-item {
        display: flex;
        align-items: center;
        background-color: #F3F8FE;
        border-radius: 30rpx;
        padding: 30rpx;
        .item-pic {
          width: 110rpx;
          height: 110rpx;
          border-radius: 50%;
          margin-right: 20rpx;
          flex-shrink: 0;
        }
        .item-data {
          color: #999;
          font-size: 24rpx;
          .data-title {
            color: #111111;
            font-weight: bold;
            font-size: 30rpx;
            margin-bottom: 10rpx;
          }
        }

      }
    }
  }
}

.page-bottom {
  width: 100%;
  padding: 30rpx 30rpx calc(30rpx + env(safe-area-inset-bottom));
  position: fixed;
  bottom: 0;
  z-index: 2;
  .bottom-btn {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
    color: #ffffff;
    font-size: 30rpx;
    font-weight: bold;
    border-radius: 40rpx;
  }
  &Footer {
    height: calc(140rpx + env(safe-area-inset-bottom));
  }
}

.page-pop {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 9;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;

  .pop-con {
    max-width: 80%;

    .con-box {
      background-color: #ffffff;
      padding: 30rpx;
      border-radius: 30rpx;
      position: relative;
      overflow: hidden;
      background-image: linear-gradient(0deg, #FFFFFF 15%, var(--back-rgba) 99%);
      transform-style: preserve-3d;

      &:before, &:after {
        content: '';
        width: 700rpx;
        height: 700rpx;
        background: radial-gradient(50% 50% at 50% 50%, var(--before--back-rgba) 3%, transparent 100%);
        z-index: -1;
        position: absolute;
        left: 0;
        top: 0;
        transform: translateZ(-1px) translateX(-50%) translateY(-50%);
      }

      &:after {
        left: auto;
        right: 0;
        transform: translateZ(-1px) translateX(50%) translateY(-50%);
      }

      .box-top {
        text-align: center;
        padding: 30rpx;
        font-size: 40rpx;
        font-weight: bold;
        color: #111111;

        .top-pic {
          width: 75rpx;
          height: 75rpx;
          margin: 0 auto 10rpx;
        }
      }

      .box-data {
        background-color: #ffffff;
        padding: 30rpx;
        border-radius: 20rpx;
        font-size: 28rpx;
        color: #111111;

        .data-tip {
          display: block;
          width: auto;
          border-radius: 40rpx;
          background: linear-gradient(180deg, var(--back-rgba) 0%, rgba(119, 81, 231, 0.07) 100%);
          padding: 10rpx 30rpx;
          margin: 20rpx auto;
        }

        .data-ewm {
          display: block;
          width: 300rpx;
          height: 300rpx;
          margin: 30rpx auto;
        }

        .data-contact {
          display: flex;
          align-items: flex-start;
          justify-content: center;

          .contact-text {
            margin: 0 20rpx;
          }

          .contact-icon {
            flex-shrink: 0;
            margin-top: -20rpx;

            &Right {
              margin-top: 20rpx;
              transform: rotate(180deg);
            }
          }
        }
      }

      .box-card {
        padding: 30rpx;
        border-radius: 20rpx;
        background-color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;

        .card-left {
          .left-title {
            display: flex;
            align-items: center;
            font-size: 28rpx;
            font-weight: bold;
            color: #111111;
            margin-bottom: 20rpx;

            .title-icon {
              margin-right: 10rpx;
            }
          }

          .left-tip {
            font-weight: normal;
            color: #999999;
            font-size: 24rpx;
          }
        }

        .card-btn {
          margin-left: 20rpx;
          padding: 10rpx 20rpx;
          border-radius: 30rpx;
          background-image: linear-gradient(to right, var(--color-primary), var(--color-minor));
          color: #fff;
          font-size: 28rpx;
        }
      }

      .box-tip {
        margin-top: 10rpx;
        .tip-title {
          display: flex;
          align-items: center;
          font-size: 28rpx;
          color: var(--color-primary);
          .title-icon {
            margin-right: 10rpx;
          }
        }
        .tip-text {
          font-size: 24rpx;
          color: #999;
          margin-top: 10rpx;
        }
      }
    }

    .con-close {
      display: block;
      margin: 30rpx auto;
      text-align: center;
    }
  }
}

</style>
